<template>
  <div class="container">
    <!-- 简介模块 -->
    <div class="box1">
      <div class="box1-left">
        在所有平台上
        <br />
        使用滴答清单管理一切
      </div>
      <div class="box1-right">
        <div class="box1-image">
          <el-image
            src="https://cncdn.dida365.com/sites/res/download/common/images@2/intro.png
"
          ></el-image>
        </div>
      </div>
    </div>
    <!-- 卡片模块 -->
    <div class="box2">
      <el-card class="box2-card" v-for="(item, index) in cardList" :key="index">
        <div class="card-title">{{ item.title }}</div>
        <div class="card-introduce">{{ item.introduce }}</div>
        <div class="card-image">
          <el-image :src="item.imageUrl" class="image" fit="fill"></el-image>
        </div>
        <div v-for="(ite, index) in item.button" :key="index">
          <div v-show="ite.color === 'blue'" class="card-button1">
            {{ ite.text }}
          </div>
          <div v-show="ite.color === 'black'" class="card-button2">
            <svg
              class="svg"
              xmlns="http://www.w3.org/2000/svg"
              x="0"
              y="0"
              viewBox="0 0 25 25"
              xml:space="preserve"
            >
              <path
                class="path1"
                d="M20.854 16.541c-.035-3.868 3.167-5.749 3.313-5.837-1.813-2.644-4.624-3.005-5.611-3.034-2.36-.248-4.65 1.412-5.852 1.412-1.226 0-3.078-1.388-5.074-1.348-2.568.04-4.97 1.526-6.288 3.835C-1.377 16.277.651 23.195 3.256 27c1.303 1.864 2.826 3.944 4.819 3.871 1.95-.08 2.678-1.243 5.032-1.243 2.332 0 3.016 1.243 5.048 1.196 2.093-.034 3.41-1.872 4.668-3.752 1.506-2.136 2.111-4.24 2.135-4.348-.05-.015-4.065-1.548-4.104-6.183z"
              ></path>
              <path
                class="path2"
                d="M17.014 5.167C18.063 3.855 18.78 2.071 18.581.26c-1.518.067-3.416 1.05-4.51 2.333-.967 1.13-1.831 2.983-1.608 4.726 1.705.127 3.456-.861 4.551-2.152z"
              ></path>
            </svg>
            {{ ite.text }}
          </div>
          <div v-show="ite.color === 'white'" class="card-button3">
            {{ ite.text }}
          </div>
          <div v-show="item.note.length > 0" class="card-note">
            {{ item.note }}
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "DownloadApplication",
  components: {},
  data() {
    return {
      cardList: [
        {
          title: "Windows",
          introduce: "在 Windows 电脑上运行滴答清单",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/windows.png",
          button: [{ color: "blue", text: "下载安装文件", svgShow: false }],
          note: "了解更多",
        },
        {
          title: "Android 手机和平板",
          introduce: "随时在手机和平板上管理任务",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/android.png",
          button: [{ color: "blue", text: "显示二维码", svgShow: false }],
          note: "",
        },
        {
          title: "iPhone 和 iPad",
          introduce: "随时在手机和平板上管理任务",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/iOS.png",
          button: [{ color: "black", text: "App Store 下载", svgShow: true }],
          note: "显示二维码",
        },
        {
          title: "Apple Watch",
          introduce: "在腕间添加与查看任务",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/watchOS.png",
          button: [{ color: "black", text: "App Store 下载", svgShow: true }],
          note: "",
        },
        {
          title: "Mac",
          introduce: "在 Mac 电脑上运行滴答清单",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/macOS.png",
          button: [
            { color: "black", text: "App Store 下载", svgShow: true },
            { color: "blue", text: "下载安装文件", svgShow: false },
          ],
          note: "",
        },
        {
          title: "Linux",
          introduce: "在 Linux 电脑上运行滴答清单",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/linux.png",
          button: [{ color: "blue", text: "下载安装文件", svgShow: false }],
          note: "",
        },
        {
          title: "网页",
          introduce: "在所有浏览器中访问你的任务",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/webapp.png",
          button: [{ color: "blue", text: "下载安装文件", svgShow: false }],
          note: "",
        },
        {
          title: "Chrome 网页插件",
          introduce: "一键将网页保存为任务",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/chrome.png",
          button: [
            { color: "blue", text: "前往Chrome 扩展商店", svgShow: false },
            { color: "white", text: "下载安装文件", svgShow: false },
          ],
          note: "",
        },
        {
          title: "Firefox 网页插件",
          introduce: "一键将网页保存为任务",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/firefox.png",
          button: [
            { color: "blue", text: "前往Chrome 扩展商店", svgShow: false },
          ],
          note: "",
        },
        {
          title: "Outlook 邮箱插件",
          introduce: "一键将任意邮件变成任务",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/download/common/icons@2/outlook.png",
          button: [{ color: "blue", text: "下载安装文件", svgShow: false }],
          note: "",
        },
      ],
      path1: "",
      path2: "",
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  padding-top: 72px;
  background-color: #fff;
  .box1 {
    width: 100%;
    height: 600px;
    line-height: 600px;
    padding: 72px auto auto;
    display: flex;
    align-content: space-between;
    .box1-left {
      width: 50%;
      height: 180px;
      line-height: 1.5;
      font-size: 60px;
      font-weight: 600;
      text-align: left;
      padding-top: 150px;
      padding-left: 100px;
    }
    .box1-right {
      width: 50%;
      height: 406px;
      padding-top: 80px;
      .box1-image {
        width: 500px;
        height: 406px;
      }
    }
  }
  .box2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 50px 0 60px;
    .box2-card {
      width: 30%;
      height: 480px;
      border: 1px solid #e1e1e1;
      margin-right: 50px;
      margin-bottom: 80px;
      .card-title {
        margin-top: 30px;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
      }
      .card-introduce {
        margin-top: 15px;
        font-size: 16px;
        text-align: center;
      }
      .card-image {
        width: 240px;
        height: 150px;
        margin: 50px auto 40px;
        text-align: center;
        .image {
          // width: 240px;
          height: 150px;
        }
      }
      .card-button1 {
        width: 196px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #6c8efb;
        border: 1px solid #6c8efb;
        border-radius: 10px;
        margin: 0 auto 10px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
      }
      .card-button2 {
        width: 196px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #000000;
        border: 1px solid #000000;
        border-radius: 10px;
        margin: 0 auto 10px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        .svg {
          width: 25px;
          height: 25px;
          background-color: #fff;
          .path1 {
            width: 25px;
            height: 23px;
          }
          .path2 {
            width: 6px;
            height: 7px;
          }
        }
      }
      .card-button3 {
        width: 196px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        // background-color: #000000;
        border: 1px solid #000000;
        border-radius: 10px;
        margin: 0 auto 10px;
        font-size: 18px;
        font-weight: 700;
        color: black;
        cursor: pointer;
      }
      .card-note {
        color: rgba(0, 0, 0, 0.64);
        font-size: 16px;
        line-height: 16px;
        margin-top: 28px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
